<template>
  <div>
    <el-button
      class="addquestion"
      type="primary"
      size="small"
      @click="drawer = true"
      >新增试题</el-button
    >
    <!--  -->
    <el-table :data="questionsList" border style="width: 100%">
      <el-table-column type="index" label="#" width="60"> </el-table-column>
      <el-table-column prop="title" label="题目">
        <template slot-scope="scope">
          <el-link type="primary" @click="lookQuestions(scope.row)">{{
            scope.row.title
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="分类" width="200"> </el-table-column>
      <el-table-column prop="name" label="作者" width="200"> </el-table-column>
      <el-table-column prop="date" label="发布时间" width="200">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="editList(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteList(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--  -->
    <el-drawer
      size="40%"
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      :wrapperClosable="false"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        style="padding: 20px"
      >
        <el-form-item label="题目">
          <el-input
            type="textarea"
            v-model="form.title"
            size="small"
            :rows="1"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.cid" placeholder="请选择分类">
            <el-option
              v-for="item in classifyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项">
          <el-checkbox-group v-model="form.answers">
            <div
              class="el-checkbox-row"
              v-for="(item, index) in optionsList"
              :key="index"
            >
              <el-checkbox :label="item.text" name="type"></el-checkbox>
              <el-input
                type="textarea"
                v-model="item.value"
                size="small"
                :rows="1"
              ></el-input>
              <template v-if="index >= 3">
                <el-button
                  type="success"
                  icon="el-icon-plus"
                  circle
                  style="margin-left: 10px; margin-top: 5px"
                  @click="addOptions"
                  v-if="
                    index == optionsList.length - 1 && optionsList.length < 7
                  "
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-minus"
                  style="margin-left: 10px; margin-top: 5px"
                  circle
                  v-if="index >= 4 && optionsList.length > 4"
                  @click="deleteOptions(item.value)"
                ></el-button>
              </template>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="答案">
          <div>{{ sortAnswers.join() }}</div>
        </el-form-item>
        <el-form-item label="答案提示">
          <el-input type="textarea" v-model="form.tips" :rows="2"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="cancelForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!--  -->
    <!--  -->
    <el-dialog title="试题预览" :visible.sync="isLook" close="hanlerDialog">
      <el-form :model="lookForm" size="mini">
        <el-form-item label="试题名称">
          {{ lookForm.title }}
        </el-form-item>
        <el-form-item label="试题分类">
          {{ lookForm.type }}
        </el-form-item>
        <el-form-item label="试题选项">
          <br />
          <div v-for="(item, index) in optionsList" :key="index">
            - {{ item.value }}
          </div>
        </el-form-item>
        <el-form-item label="答案提示">
          {{ lookForm.tips }}
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  layout: "msbd",
  data() {
    return {
      formLabelWidth: "120px",
      drawer: false,
      form: {
        answers: [],
      },
      lookForm: [],
      optionsAm: [65, 66, 67, 68],
      optionsList: [
        { text: "A", value: "" },
        { text: "B", value: "" },
        { text: "C", value: "" },
        { text: "D", value: "" },
      ],
      isLook: false,
    };
  },
  mounted() {
    // 获取classify列表
    this.getClassify();
    // 获取试题列表
    this.getQuestionsList();
  },
  methods: {
    ...mapActions("classify", ["getClassify"]),
    ...mapActions("test", [
      "getQuestionsList",
      "addQuestions",
      "deleteQuestions",
    ]),
    // 新增选项
    addOptions($event) {
      this.optionsAm.push((this.optionsAm[this.optionsAm.length - 1] += 1));
      if (this.optionsList.length < 7) {
        this.optionsList.push({
          text: String.fromCharCode(this.optionsAm[this.optionsAm.length - 1]),
          value: "",
        });
      }
    },
    // 删除选项
    deleteOptions(val) {
      if (
        this.form.answers[this.form.answers.length - 1] ==
        this.optionsList[this.optionsList.length - 1].text
      ) {
        this.form.answers.splice(this.form.answers.length - 1, 1);
      }
      this.optionsList.splice(this.optionsList.length - 1, 1);
      this.optionsList[this.optionsList.length - 1].value = val;
    },
    // 提交
    async onSubmit() {
      this.form.options = this.optionsList;
      this.form.answers = this.sortAnswers;
      await this.addQuestions(this.form);
      this.$message({
        message: this.form.id ? "修改试题成功" : "新增试题成功!",
        type: "success",
      });
      this.drawer = false;
      this.form = {
        answers: [],
      };
      this.optionsList = [
        { text: "A", value: "" },
        { text: "B", value: "" },
        { text: "C", value: "" },
        { text: "D", value: "" },
      ];
    },
    // 删除
    deleteList(row) {
      this.$confirm("确定要删除试题吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteQuestions(row);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
    // 修改
    editList(row) {
      this.drawer = true;
      this.form = {
        ...row,
        answers: JSON.parse(row.answers),
      };
      let optionsArr = JSON.parse(row.options);
      this.optionsList = optionsArr.map((v) => {
        return { text: v.text ? v.text : v.index, value: v.value };
      });
    },
    // 查看
    lookQuestions(row) {
      this.lookForm = { ...row };
      this.optionsList = JSON.parse(row.options);
      this.isLook = true;
    },
    cancelForm() {
      this.drawer = false;
      this.form = {
        answers: [],
      };
      this.optionsList = [
        { text: "A", value: "" },
        { text: "B", value: "" },
        { text: "C", value: "" },
        { text: "D", value: "" },
      ];
    },
  },
  computed: {
    ...mapState("test", ["questionsList"]),
    ...mapGetters(["classifyList"]),
    // 答案排序
    sortAnswers() {
      return this.form.answers.sort();
    },
    // 转换分类
    // questionsArr() {
    //   return this.questionsList.map((v) => {
    //     return {  }
    //   });
    // },
  },
  watch: {
    isLook(val) {
      if (!val) {
        this.optionsList = [
          { text: "A", value: "" },
          { text: "B", value: "" },
          { text: "C", value: "" },
          { text: "D", value: "" },
        ];
      }
    },
  },
};
</script>

<style>
.el-drawer.rtl {
  overflow: auto;
}
</style>

<style scoped>
.addquestion {
  margin: 5px 0px 10px 5px;
}

.el-checkbox-row {
  display: flex;
}

.el-checkbox-row .el-textarea {
  width: 75%;
  margin-top: 7px;
  margin-left: 10px;
}
</style>